*{font-family: 'Microsoft YaHei UI','Microsoft YaHei',SimSun,'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;}
.textCenter{text-align: center;}

.IM{width: 100%;height: 100%;background-color: #f8f8f8;}
.IM .frame{height: 100%;}

.IM .header{height: 50px;}
.IM .left .header{border-bottom: 1px solid #414a73;}
.IM .left .header a{line-height: 50px;height: 100%;display: inline-block;color: #fff;}
.IM .left .header .privateLatter{width: 100%;background-color: #414a73;font-size: 15px;}
.IM .left .header .msg,.IM .header .person{width: 50%;background-color: #282d45;background-position: center;background-repeat: no-repeat;border-bottom: 3px solid #282d45;}
.IM .left .header .msg{background-image: url(http://tb2.bdstatic.com/tb/static-message/widget/left_vm/img/sixin-msg-01_140328b.png);}
.IM .left .header .person{background-image: url(http://tb2.bdstatic.com/tb/static-message/widget/left_vm/img/sixin-msg-02_0d9e698.png);}
.IM .left .header .active-h{border-bottom:3px solid #d75144;}
    
.IM .left .personList{height:calc(100% - 51px);background-color: #282d45;overflow-y: scroll;}
.IM .left .personList .person{height: 50px;padding: 8px 20px;width: calc(100% - 20px);line-height: 1.5;cursor: pointer;position: relative;}
.IM .left .personList .person img,.IM .left .personList .person span{display: inline-block;vertical-align: middle;}
.IM .left .personList .person img{width: 28px;height: 28px;border-radius: 28px;}
.IM .left .personList .person span{text-overflow: ellipsis;white-space: nowrap;color: #fff;font-size: 13px;text-indent: 5px;}
.IM .left .personList .person i{display: inline-block;width: 15px;height: 15px;background-color: red;color: #fff;float: right;font-size: 12px;line-height: 5px;border-radius: 10px;text-align: center;padding: 5px 2px 0px 0px;position: absolute;left: 5px;top: 10px;}

.IM .right .header{border-bottom: 1px solid #cfcfcf;padding: 15px 20px;height: 50px;position: relative;}
.IM .right .header .setReaded{display: inline-block;background-color: #427cc4;color: #fff;padding: 3px 16px;border:1px solid #386eb1;}
.IM .right .header .settings{display: inline-block;width: 18px;height: 18px;background-image: url(http://tb2.bdstatic.com/tb/static-message/widget/message_bundle/img/settings-01_6b6ab25.png);background-position: -1px -4px;}
.IM .right .header .settings-disk{position: absolute;width: 140px;background: #f8f8f8;right: 18px;top: 47px;border: 1px solid #a3a3a3;box-shadow: #cacaca 0 0 2px 2px;}
.IM .right .header .settings-disk:before{content: '';position: absolute;top: -9px;right: 5px;width: 12px;height: 9px;background-image: url(http://tb2.bdstatic.com/tb/static-message/widget/message_bundle/img/arrow-top_9170f87.png);}
.IM .right .header .settings-disk h4{height: 35px;margin: 0px;display: block;font-weight: 700;line-height: 35px;text-indent: 18px;color: #333;font-family: 'Microsoft YaHei';}
.IM .right .header .settings-disk a{height: 35px;line-height: 35px;display: block;background: #fefeff;color: #676767;text-indent: 18px;cursor: pointer;font-family: 'Microsoft YaHei';}
.IM .right .header .settings-disk a.active,.IM .right .header .settings-disk a:hover{background: #f1f1f1;}
.IM .right .con{height: calc(100% - 90px - 2px - 130px);width: calc(100% - 40px - 2px);background-color: #fff;border: 1px solid #ccc;margin: 20px 20px 0px 20px;}
.IM .right .con .title{background-color: #414a73;padding: 15px 20px;color: #fff;}
.IM .right .con .messageCon{width: 100%;height: calc(100% - 50px);padding: 10px;overflow-y: scroll;}
.IM .right .con .messageCon div{width: 100%;display: inline-block;}
.IM .right .con .messageCon div p{height: auto;min-height: 20px;display: block;max-width: 60%;min-width: 50px;padding: 10px;background-color: rgba(20,20,20,0.2);border-radius: 20px;width: auto;display: inline-block;}
.IM .right .con .messageCon div p.tx_r{float: right;}
.IM .right .buttom{height: 130px;width: calc(100% - 40px - 2px);border: 1px solid #ccc;margin: 0px 20px;border-top: 0px;padding: 20px 15px 10px 15px;background-color: #fff;}
.IM .right .buttom textarea{resize:none;height: calc(60px - 4px - 4px);width: calc(100% - 4px - 4px);padding: 2px 2px;border: 2px solid #d5dffa;}
.IM .right .buttom .buttom-b{margin-top: 10px;width: 100%;height: 26px;}
.IM .right .buttom .buttom-b button{padding: 4px 30px;background-color: #427cc4;border:1px solid #386eb1;color: #fff;font-size: 13px;border-radius: 2px;}
.IM .right .buttom .buttom-b span{color: #ccc;line-height: 26px;font-size: 14px;margin-right: 10px;}